<include file="layout/header" />
<script src="__JS__/My97DatePicker/WdatePicker.js"></script>
<script src="__JS__/WdatePicker.js"></script>
<script src="__JS__/layer/layer.js"></script>
<style type="text/css">
    .teamNum{
        height:20px;
        line-height:20px;
        color:#fff;
        font-size:16px;
    }
    .teamNum span{
        display: inline-block;
        padding:6px 10px;
        border-radius:5px;
        background:#f89000;
    }
    #dt_basic tbody tr td{
          vertical-align:middle;
    }
    #dt_basic tbody tr td:last-child{
        text-align: center;
    }
    #dt_basic tbody tr td button{
        display: inline-block;
        margin:0 10px;
        width: 70px;
    }
    #dt_basic tbody tr td b{
        display: inline-block;
        margin:0 10px;
        width: 70px;
    }
    a{
        cursor:pointer;
    }
</style>
<div id="content">                
    <!-- widget grid -->
    <section id="widget-grid" class="">
    
        <!-- row -->
        <div class="row">
    
            <!-- NEW WIDGET START -->
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 sortable-grid ui-sortable">
    
                <!-- Widget ID (each widget will need unique ID)-->
                <div class="jarviswidget jarviswidget-color-darken jarviswidget-sortable" id="wid-id-0" data-widget-editbutton="false" role="widget">
                    <header role="heading">
                    <div class="jarviswidget-ctrls" role="menu">   </div>
                    <span class="widget-icon"> <i class="fa fa-table"></i> </span>
                    <h2>发货列表</h2>
    
                    <span class="jarviswidget-loader"><i class="fa fa-refresh fa-spin"></i></span></header>
                        
                    <!-- widget div-->
                    <div role="content">
    
                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->
                        </div>
                        <!-- end widget edit box -->
                        <!-- widget content -->
                        <div class="widget-body no-padding">
                            <div class="widget-body-toolbar">
                                <form action='{{:url("manage/Order/sendlist")}}' method="get">

                                    <label class="select col-xs-2">
                                        <select name="logistics" class=" form-control">
                                            <option value="-1"  <if condition="$logistics eq -1">selected</if>  >发货状态</option>
                                            <option value="0" <if condition="$logistics eq 0">selected</if> >待发货</option>
                                            <option value="1" <if condition="$logistics eq 1">selected</if> >已发货</option>
                                            <option value="2" <if condition="$logistics eq 2">selected</if>  >已收货</option>
                                        </select>
                                    </label>
                                    <div class="input-group col-xs-1">
                                       <div class="input-group-btn">
                                            <button class="btn btn-default btn-primary" type="submit"><i class="fa fa-search"></i> 搜索</button>
                                        </div>&nbsp;&nbsp;
                                        <div class="input-group-btn">
                                            <a href="{{:url('manage/Order/sendlist')}}"><button type="button" class="btn btn-default">
                                                全部
                                            </button></a>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div id="dt_basic_wrapper" class="dataTables_wrapper form-inline" role="grid">
                                <div class="dt-wrapper">
                                    <table id="dt_basic" class="table table-striped table-bordered table-hover dataTable" aria-describedby="dt_basic_info">
                                        <thead>
                                            <tr role="row">
                                                <th>订单号</th>
                                                <th>名称</th>
                                                <th>负责人</th>
                                                <th>下单时间</th>
                                                <th>发货状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody role="alert" aria-live="polite">
                                        <volist name="data" id="vo">
                                            <tr class="odd" id="{{$vo.id}}">
                                                <td>{{$vo.order_no}}</td>
                                                <td>
                                                    <if condition="$vo.type eq 2">
                                                        {{$vo.create_name}}的产品订单
                                                        <elseif condition="$vo.type eq 3"/>
                                                        {{$vo.order_name}}
                                                    </if>
                                                </td>
                                                <td>
                                                    {{$vo.charge_name}}
                                                </td>
                                                <td>
                                                    {{$vo.create_t|date="Y-m-d H:i:s",###}}
                                                </td>
                                                <td class="state">
                                                    <if condition="$vo.logistics eq 0"><code>待发货</code>
                                                    <elseif condition="$vo.logistics eq 1"/> <samp>已发货</samp>
                                                    <elseif condition="$vo.logistics eq 2"/><var>已收货</var>
                                                    </if>
                                                </td>

                                                <td class="btnBox">
                                                    <a target="_blank" class="btn btn-default btn-primary btn-xs" href="{{:url('manage/Order/loginfo',['id'=>$vo.id])}}">详情</a>
                                                    <if condition="$vo.logistics eq 0">
                                                        <a class="btn btn-default btn-primary btn-xs btnOk" @click="modalShow({{$vo.id}})">发货</a>
                                                    </if>
                                                </td>
                                            </tr>
                                        </volist>

                                        </tbody>
                                    </table>
                                </div>
                                <div class="dt-row dt-bottom-row">
                                    <div class="row">
                                        <div class="col-sm-6"></div>
                                        <div class="col-sm-6 text-right">
                                            <div class="dataTables_paginate paging_bootstrap_full">
                                                <ul class="pagination">
                                                    {{$data->render()}}
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>
                        <!-- end widget content -->
    
                    </div>
                    <!-- end widget div -->
                </div>
            </article>
            <!-- WIDGET END -->
        </div>
        <!-- end row -->
    </section>
    <!-- end widget grid -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" @click="modalHide" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">发货详情</h4>
                </div>
                <div class="modal-body">
    
                    
                    <div class="row">
                        <div class="form-group" style="margin-bottom:20px;overflow:hidden;">
                            <label class="col-md-2 control-label" style="line-height: 32px;margin-bottom:0;">订单编号</label>
                            <div class="col-md-10">
                                <input class="form-control" placeholder="请输入订单编号" type="text" v-model="order.lid">
                            </div>
                        </div>
                        <div class="form-group" style="margin-bottom:20px;overflow:hidden;">
                            <label class="col-md-2 control-label" style="line-height: 32px;margin-bottom:0;">预计时间</label>
                            <div class="col-md-10">
                                <input id="time" class="form-control" placeholder="请选择时间" type="text" v-model="order.time" @focus="timeShow" @blur="timeGo">
                            </div>
                        </div>
                        <p id="alertText" class="col-md-offset-2" style="color:red"></p>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" @click="modalHide">
                        取消
                    </button>
                    <button type="button" class="btn btn-primary" @click="submit" :disabled="disabled">
                        确定
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
<include file="layout/footer" />
<script type="text/javascript">
 var vm = new Vue({
    el:"#content",
    data:{
        page:1,
        pageList:[1,2,3,4,5],
        last:10,
        list:[
                {id:1,num:1245,name:"燃气",state:"1",time:1874452152},
                {id:2,num:3141,name:"煤",state:"2",time:1254865125},
                {id:3,num:4123,name:"手枪",state:"4",time:1521589158},
                {id:4,num:2131,name:"狙击枪",state:"3",time:1258469789},
                {id:5,num:2342,name:"迫击炮",state:"1",time:1874452645},
                {id:6,num:1234,name:"意大利炮",state:"1",time:1485279614},
                {id:7,num:5234,name:"洲际导弹",state:"2",time:1268528866},
                {id:8,num:6424,name:"萨德",state:"3",time:1842621645},
                {id:9,num:7357,name:"原子弹",state:"3",time:1761586127},
                {id:0,num:2478,name:"氢弹",state:"4",time:1456982985},
            ],
        order:{
            id:"",
            lid:"",
            time:""
        },
        disabled:false
    },
    methods:{
        ajaxList:function(page){

        },
        goPage:function(page){
            page = page < 1 ? 1 : page;
            page = page > this.last ? this.last : page;
            this.page = page;
            if(this.last > 5){
                if(this.page > 3 && this.last - this.page > 2){
                    this.pageList = [this.page-2,this.page-1,this.page,this.page+1,this.page+2];
                }else if(this.page <= 3){
                    this.pageList = [1,2,3,4,5];
                }else if(this.last - this.page <= 2){
                    this.pageList = [this.last-4,this.last-3,this.last-2,this.last-1,this.last];
                }
            };
            this.ajaxList(this.page);
        },
        modalShow:function(id){
            $("#myModal").modal("show");
            this.order.id = id;
        },
        timeShow:function(){
            WdatePicker({dateFmt:'yyyy-MM-dd', minDate:'2008-03-08'});
        },
        timeGo:function(e){
            this.order.time = $(e.target).val();
        },
        modalHide:function(){
            $("#alertText").html("");
            $("#myModal").modal("hide");
            this.order = {};
        },
        submit:function(){
            if(this.order.lid == ""){
                $("#alertText").html("请填写订单编号");
                return;
            }else if(this.order.time == ""){
                $("#alertText").html("请填写预计时间");
                return;
            }
            this.disabled = true;
            $.post("{{:url('manage/Order/logistics')}}",this.order,function(data){
                if(data.status == 1){
                    $("#"+this.order.id).find(".state").html("已发货");
                    $("#"+this.order.id).find(".btnOk").hide();
                    this.disabled = false;
                    this.modalHide();
                    layer.msg("提交成功！");
                }else{
                    this.disabled = false;
                    $("#alertText").html(data.message);
                }
            }.bind(this),"json")
        }
    },
    created:function(){
        this.ajaxList(1);
    },
    filters:{
        timeTo:function(date,type){// data:时间戳，type:显示类型(可不填) "date"-->YY/MM/DD; "time"-->h:m:s;
            date = new Date(parseInt(date)*1000);
            var toTime = "";
            var Y = date.getFullYear();
            var M = date.getMonth()+1;
            var D = date.getDate();
            var h = date.getHours();
            var m = date.getMinutes();
            var s = date.getSeconds();
            M = M < 10?("0" + M) : M;
            D = D < 10?("0" + D) : D;
            h = h < 10?("0" + h) : h;
            m = m < 10?("0" + m) : m;
            s = s < 10?("0" + s) : s;
            if(type == "date"){
                toTime = Y + "-" + M + "-" + D
            }else if(type == "time"){
                toTime = h + ":" + m + ":" + s;
            }else{
                toTime = Y + "-" + M + "-" + D +" " + h + ":" + m + ":" + s;
            }
            return toTime;
        },
        state:function(data){

        }
    }
 })

</script>